<script setup>
import { onMounted, getCurrentInstance, reactive, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import QRCode from 'qrcode'
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const data = reactive({
  usInfo: [],
  info: [],
  teacher: [],
  active: 0,
  show: false,
  qrcode_data: "",
  recommend: [],
  ClassIndex: 0,
  Classlist: [{
    name: '章节分类'
  }, {
    name: '时间排序'
  },],
})
const back = () => {
  router.back()
}
onBeforeMount(() => {

}),
  onMounted(async () => {
    const res = await proxy.$http.userInfo(route.query.id)
    console.log(res);
    data.usInfo = res.data
    data.info = res.data.info
    data.teacher = res.data.info.teacher.slice(0, 2)
    data.course_periods = res.data.course_periods
    console.log(data.usInfo);
    location.href
    console.log(location.href);
    let baidu = 'https://www.baidu.com/'
    data.qrcode_data = await QRCode.toDataURL(baidu)
  })
// 显示弹框
const showPopup = () => {
  // console.log();
  data.show = true
}
const Classjump = (index) => {
  data.ClassIndex = index
}
</script>
<template>
  <div class="about">
    <!-- {{ route.query.id }} -->
    <!-- {{data.usInfo}} -->
    <div class="Top">
      <van-icon name="arrow-left" size="50px" @click="back" />
      <h2>课程详情</h2>
      <div>
        <img
          src=""
          alt="">
        <img src="../assets/分享.png" alt="" class="fen" @click="showPopup">
      </div>
    </div>
    <!-- {{ data.usInfo.info }} -->
    <van-popup v-model:show="data.show">
      <img :src="data.qrcode_data" alt="" class="erwei">
    </van-popup>
    <!-- <video src=""></video> -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in data.usInfo.banner ">
        <img :src="item.banner_src" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="cont">
      <h2>
        {{ data.info.title }}
      </h2>
      <div>
        共{{ data.info.states }}课时 | 系统课
      </div>
      <div>
        限{{ data.info.stock }}人 已报名{{ data.info.stock_num }}人
      </div>
      <div class="Tea">
        <div v-for="(item, index) in data.teacher" :key="index" class="hang">
          <img :src="item.avatar" alt="" class="tou">
          <p>{{ item.teacher_name }}</p>
        </div>
      </div>

    </div>
    <div>
      <van-cell title="课前准备" />
      <van-cell title="关注公众号接收重要信息">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-button type="danger" round style="height:70px ;  width: 210px;" color="#ef8a1f">关注公众号</van-button>
        </template>
      </van-cell>
      <van-cell title="添加助教，进学习群领高分资料">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-button type="danger" round style="height:70px ; width: 210px;" color="#ef8a1f">联系方式</van-button>
        </template>
      </van-cell>
    </div>
    <van-tabs v-model:active="data.active" color="#f16047" title-active-color="#f16047" class="av">
      <van-tab title="课程详情" class="avs">
        <div v-html="data.info.course_details" class="acc">
        </div>
      </van-tab>
      <van-tab title="课程安排">
        <ul class="Cu1">
          <li :class="(data.ClassIndex === 0 ? 'Cl1 active' : 'Cl1')" :index="0" @click="Classjump(0)"> <van-icon
              name="bars" /><span>章节分类</span></li>
          <li :class="(data.ClassIndex === 1 ? 'Cl1 active' : 'Cl1')" :index="1" class="Cl1" @click="Classjump(1)">
            <van-icon name="underway-o" /><span>时间排序</span>
          </li>
        </ul>

        <ul class="ClassM">
          <!-- {{data.course_periods}}   -->
          <li v-for="(item, index) in data.course_periods" :key="index" class="mu">
            {{ item.course_title }}
          </li>
        </ul>

      </van-tab>
      <van-tab title="资料下载"><van-empty description="暂无资料" /></van-tab>
      <van-tab title="课程评价"><van-empty description="暂无评价" /></van-tab>
    </van-tabs>
  </div>
  <!-- 底部 -->
  <div class="bot">
    <div class="price">
      <p v-if="(data.info.price === 0)" style="color: #38e274;">免费</p>
      <p v-else style="color: red;">￥{{ data.info.price / 100 }}.00</p>
    </div>
    <div class="ke">
      <van-icon name="service-o" size="50px" />
      客服
    </div>
    <van-button type="danger" class="l1" square color="#f15a24">立即报名</van-button>
  </div>

</template>
<!-- <style>
  img {
    min-width: 100% !important;
  }
</style> -->
<style lang="scss" scoped>
.about {
  .Top {
    width: 100%;
    height: 100px;
    // background-color: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
     color: #000;

    .fen {
      width: 45px;
      height: 45px;
      margin-left: 40px;
    }
  }
}

.ClassM {
  width: 500px;
  margin: 20px auto;

  .mu {
    width: 500px;
    height: 70px;
    background-color: #f6f6f6;
    margin-top: 10px;
    line-height: 70px;
    box-sizing: border-box;
    padding: 2px 5px;
  }
}

.Cu1 {
  display: flex;
  margin-top: 40px;
  box-sizing: border-box;
  padding-left: 180px;

  // text-align: center;
  .Cl1 {
    width: 150px;
    height: 50px;
    color: #ccc;
    border-radius: 30px;
    // margin: 0 auto;
    // line-height: 50px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-left: 20px;
    padding: 5px;

    span {
      display: inline-block;
      margin-left: 10px;
    }

  }

  .active {
    color: #ff8800;
    border: 1px solid #ff8800;
  }
}

.cont {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;

  .tou {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .hang {
    width: 200px;
    // background-color: red;
    height: 100px;
    display: flex;
    align-items: center;

  }

  .Tea {
    display: flex;
  }

}

.acc {
  :deep(p img) {
    width: 100% !important;
  }

}

.my-swipe {
  width: 100%;

  img {
    width: 100%;
  }
}

.av {
  width: 100%;
  padding-bottom: 100px;
  // height: ;
  // margin-bottom: 100px;

  .avs {
    width: 100%;
  }
}


.bot {
  width: 100%;
  height: 100px;
  // background-color: red;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;

  .ke {
    width: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-left: 1px solid #ccc;
    padding-top: 5px;
  }

  .price {
    width: 250px;
    // background-color: aqua;
    text-align: center;
    height: 100%;
    line-height: 100px;
    font-size: 35px;
  }

  .l1 {
    flex: 1;
    height: 100%;
    // width: ;
  }
}

.erwei {
  width: 400px;
  height: 400px;
}
</style>
